import { Button, Popconfirm, Tooltip } from "antd";
import { cloneDeep } from "lodash";
import React, { createRef, FC } from "react";
import { SkuFormListItem } from "../../SkuTable";
import SkuSelect from "./components/SkuSelect";
import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
import { StyledArrowRow, StyledDownOutlined, StyledUpOutlined } from "@/views/goods/OperateGoods/styled";

interface SkuFormListProps {
	skuFormList: SkuFormListItem[];
	setSkuFormList: (skuFormList: SkuFormListItem[]) => void;
}
const SkuFormList: FC<SkuFormListProps> = ({ skuFormList, setSkuFormList }) => {
	const moveRecord = (index: number, position: -1 | 1) => {
		const copiedData = cloneDeep(skuFormList);
		if (position === -1) {
			copiedData.splice(index - 1, 0, copiedData.splice(index, 1)[0]);
		} else {
			copiedData.splice(index, 0, copiedData.splice(index + 1, 1)[0]);
		}
		setSkuFormList(copiedData);
	};
	return (
		<>
			{skuFormList.map((item, index) => (
				<div key={index} className="relative pt-6">
					<SkuSelect skuFormList={skuFormList} setSkuFormList={setSkuFormList} formRef={item.ref} index={index} />
					<div className="flex absolute right-[50px] top-[32%]">
						<div className="flex items-center">
							{index !== 0 && <Button className="mr-2" icon={<StyledUpOutlined onClick={() => moveRecord(index, -1)} />} />}
							{index !== skuFormList.length - 1 && (
								<Button className="mr-2" icon={<StyledDownOutlined onClick={() => moveRecord(index, 1)} />} />
							)}
						</div>
						<Button
							onClick={() => {
								const copiedList = cloneDeep(skuFormList);
								copiedList.splice(index + 1, 0, { key: null, value: null, ref: createRef() });
								setSkuFormList(copiedList);
							}}
							icon={<PlusOutlined />}
							type="primary"
						/>
						{skuFormList.length > 1 && (
							<Popconfirm
								title="确定删除该规格吗？"
								onConfirm={() => {
									const copiedList = cloneDeep(skuFormList);
									copiedList.splice(index, 1);
									setSkuFormList(copiedList);
								}}
							>
								<Button icon={<DeleteOutlined />} danger className="ml-2" />
							</Popconfirm>
						)}
					</div>
					<div style={{ marginLeft: "10%", width: "80%", borderBottom: "1px solid #e4e4e4" }} />
				</div>
			))}
		</>
	);
};

export default SkuFormList;
